<template>
  <div class="container">
    <!-- 头部渐变背景   -->
    <div class="bg-color" :style="{backgroundImage:'linear-gradient('+ bgColor +' 20%, #f5f5f5 80%)'}"></div>
    <div class="panel panel-box">
      <div class="flex v-align-c div-input">
        <div class="mar-r-10 width-80 font-color">收货人</div>
        <div class="flex-item"><input v-model="addressInfo.receiverName" maxlength="15" class="font-black" placeholder="请输入收货人姓名"/></div>
      </div>
      <div class="flex v-align-c div-input">
        <div class="mar-r-10 width-80 font-color">手机号码</div>
        <div class="flex-item"><input v-model="addressInfo.receiverPhone" maxlength="11" class="font-black" placeholder="请输入收货人手机号码"/></div>
      </div>
      <div class="flex v-align-c div-input">
        <div class="mar-r-10 width-80 font-color">所在地区</div>
        <div class="flex-item">
          <div class="flex v-align-c">
            <input v-model="addressInfo.shortAddress" :disabled="true" @click="changeCity" class="font-black flex-item" placeholder="请选择所在地区"/>
            <div @click="changeCity" class="flex v-align-c">
              <img
                v-if="fileSpace"
                :src="fileSpace + '/images/local-icon-12.png'"
                class="width-14 height-17 mar-l-7 mar-r-3" alt="">
              <div class="font-14 font-local">定位</div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex v-align-c div-input">
        <div class="mar-r-10 width-80 font-color">详细地址</div>
        <div class="flex-item">
          <input v-model="addressInfo.communityName" class="font-black" maxlength="100" placeholder="请输入详细地址"/>
        </div>
      </div>      
      <div class="flex v-align-c div-input">
        <div class="mar-r-10 width-80 font-color">门牌号</div>
        <div class="flex-item"><input v-model="houseNum" class="font-black" maxlength="100" placeholder="请输入门牌号"/></div>
      </div>
      <div class="flex v-align-c div-input">
        <div class="mar-r-10 width-80 font-color">地址标签</div>
        <div class="address-tag-box font-12">
          <span
            v-for="(item,index) of addressTag"
            :key="index"
            class="address-tag"
            @click="changeAddressTag(index)"
            :class="activeAddressTagIndex === index ? 'active-address-tag':'dis-address-tag'">{{item}}</span>
        </div>
      </div>
      <div class="flex flex-between div-input">
        <div class="mar-r-10 width-80 font-color">默认地址</div>
        <div class="v-align-c pad-l-10 default-checkbox" @click="changeDefaultFlag">
          <van-switch :checked="defaultFlag" active-color="#FF243D"/>
        </div>
      </div>
      <div class="flex v-align-c div-input none-b">
        <div class="flex-item">
          <div class="font-color flex v-align-c">
            <div>证件信息</div>
            <div v-if="isOpenCertificateInfo" class="font-12 font-color-9 mar-b--2">（跨境商品需要提供付款证件信息)</div>
          </div>
        </div>
        <div class="v-align-c pad-l-10 default-checkbox" @click="changeCertificateInfoFlag">
          <van-switch :checked="isOpenCertificateInfo" active-color="#FF243D"/>
        </div>
      </div>
      <div
        v-if="isOpenCertificateInfo"
        class="font-12 pad-l-10 copy-c mar-t--5 mar-b--1 flex">
        <div class="pad-t-13 pad-b-13 mar-t--13 mar-b--13" @click="copyRealInfo">从其他地址中复制</div>
      </div>
      <template v-if="isOpenCertificateInfo">
        <div class="flex v-align-c div-input">
          <div class="mar-r-10 width-80 font-color">真实姓名</div>
          <div class="flex-item"><input v-model="addressInfo.certificateRealName" maxlength="15" class="font-black" placeholder="请输入真实姓名"/></div>
        </div>
        <div class="flex v-align-c div-input">
          <div class="mar-r-10 width-80 font-color">证件类型</div>
          <div class="flex-item font-black">身份证</div>
        </div>
        <div class="flex v-align-c div-input">
          <div class="mar-r-10 width-80 font-color">证件号</div>
          <!-- @blur="blurCertificateNumber(addressInfo.certificateNumber, $event)" -->
          <div class="flex-item">
            <input v-model="addressInfo.certificateNumber" class="font-black" maxlength="19" placeholder="请输入证件号"/>
          </div>
        </div>
      </template>
    </div>
    <div class="height-24"></div>
    <div class="mar-l-15 mar-r-15" @click="saveAddress">
      <div class="save-p-button flex flex-center height-45 font-16 font-w">
        <span>保存</span>
      </div>
    </div>
    <div v-if="addressModify" class="text-align-c pad-t-12">
      <label class="label-inline" @click="delAddress">
        <span class="flex v-align-c font-color-9 font-16">
          <span>删除该地址</span>
        </span>
      </label>
    </div>
    <div class="height-25"></div>
    <!-- 选择证件类型列表 -->
    <van-popup
      :show="isShowTypePicker"
      position="bottom"
      @close="onTypeClose">
      <van-picker
        show-toolbar
        :columns="pickerTypeArray"
        @cancel="onTypeClose"
        @confirm="onTypeConfirm"/>
    </van-popup>
    <!-- 选择省市区 -->
    <div class="div-pop" v-show="showAddressPicker">
      <div class ="warmBox flex-col">
        <span class="font-16 font-w text-align-c pad-14">定位提示</span>
        <div class="font-color-9 text-align-c pad-20">
          定位地址不完整,请点击"<span style="color: #60739B">确定</span>"重新选择地址信息!
        </div>
        <div class="flex warm-btn-box mar-t-20">
          <span class="cursor-p cancle-btn flex-item flex flex-center pad-t-14 pad-t-14 pad-b-14" @click.stop="showAddressPicker = false">取消</span>
          <picker class="flex-item flex flex-center pad-t-14 pad-b-14" mode="multiSelector" @change="sureChangeAddress" @columnchange="bindRegionChange" :value="multiIndex" :range="tempAreaLevelList" range-key="areaName">
            <span class="font-w font-16 picker sure-btn" @click="showAddressPicker = false">确定</span>
          </picker>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { saveAddress, deleteAddress, getAllAreaLevelList } from '@/api/address'
  export default {
    data() {
      return {
        defaultFlag: false,
        isOpenCertificateInfo: false,
        addressInfo: {
          defaultFlag: 0,
          isOpenCertificateInfo: 0,
          address: '',
          shortAddress: '',
          provinceCode: '', // 省编码
          cityCode: '', // 市编码
          districtCode: '', // 区编码
          provinceName: '', // 省名称
          cityName: '', // 市名称
          districtName: '' // 区名称
        },
        customItem: '全部',
        submitStatus: false,
        addressModify: true,
        addressTag: ['家', '公司', '学校', '其他'],
        activeAddressTagIndex: 0,
        houseNum: '', // 门牌号
        addressLabel: '', // 地址标签
        chooseLocation: false,
        bgColor: '#FF243D',
        isShowTypePicker: false,
        pickerTypeArray: [{
          text: '身份证',
          value: 1
        }, {
          text: '军官证',
          value: 2
        }, {
          text: '护照',
          value: 3
        }, {
          text: '其他',
          value: 99
        }],
        pickTypeId: 1,
        pickTypeText: '身份证',
        viewBoolean: false,
        areaLevelList: [],
        tempAreaLevelList: [],
        showAddressPicker: false,
        areaList: {
          province_list: {

          },
          city_list: {

          },
          county_list: {

          }
        },
        multiIndex: [0, 0, 0]
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
      this.getAllAreaLevelList()
    },
    onShow() {
      wx.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#FF243D'
      })
      this.$pt.removeStorageSync('copyBoolean')
      this.$pt.removeStorageSync('chooseLocation')
      if (!this.$pt.getStorageSync('addressDetail')) {
        if (this.viewBoolean) return
      }
      this.$pt.removeStorageSync('addressDetail')
      this.houseNum = ''
      this.chooseLocation = false
      this.submitStatus = false
      if (this.getCurrentPage().query.addressObj) {
        this.addressInfo = JSON.parse(this.getCurrentPage().query.addressObj)
        console.log('addinfo')
        console.log(this.addressInfo)
      }
      console.log('save query 11', this.addressInfo)
      if (this.addressInfo.defaultFlag * 1 === 1) {
        this.defaultFlag = true
      } else {
        this.defaultFlag = false
      }
      if (this.addressInfo.isOpenCertificateInfo * 1 === 1) {
        this.isOpenCertificateInfo = true
      } else {
        this.isOpenCertificateInfo = false
      }
      // 假设数据，证件滑块打开
      // this.isOpenCertificateInfo = true
      if ((this.addressInfo.receiverName && this.addressInfo.receiverPhone) || this.addressInfo.address) {
        this.addressModify = true
      } else {
        this.addressModify = false
      }
      if (this.addressInfo.address) {
        if (this.addressInfo.houseNum) {
          this.houseNum = this.addressInfo.houseNum
        }
        this.addressInfo.address = (this.addressInfo.provinceName || '') + (this.addressInfo.cityName || '') + (this.addressInfo.districtName || '') + this.addressInfo.address
        this.addressInfo.shortAddress = (this.addressInfo.provinceName || '') + (this.addressInfo.cityName || '') + (this.addressInfo.districtName || '')
      }
      if (this.addressInfo.addressLabel) {
        let index = this.addressTag.findIndex(listItem => {
          return listItem === this.addressInfo.addressLabel
        })
        this.activeAddressTagIndex = index
      }
      if (this.$pt.getStorageSync('pageBuyFrom') && this.$pt.getStorageSync('addressNone')) {
        this.changeDefaultFlag()
      }
    },
    methods: {
      blurCertificateNumber(item, event) {
        if (event.mp.detail.value) {
          if (!this.$utils.checkUserIdCode(event.mp.detail.value)) {
            this.$pt.showToast({
              title: '请输入正确的证件号',
              icon: 'none'
            })
            // return
          }
        }
        console.log('b2 ' + item)
        console.log('b1 ' + event.mp.detail.value)
      },
      test(e) {
        console.log(e)
      },
      resetAddressInfo() {
        this.$delete(this.addressInfo, 'address')
        this.$delete(this.addressInfo, 'shortAddress')
        this.$delete(this.addressInfo, 'provinceCode')
        this.$delete(this.addressInfo, 'cityCode')
        this.$delete(this.addressInfo, 'districtCode')
        this.$delete(this.addressInfo, 'provinceName')
        this.$delete(this.addressInfo, 'cityName')
        this.$delete(this.addressInfo, 'districtName')
        this.addressInfo.communityName = ''
      },
      enterAddress(e) {
        this.resetAddressInfo()
        this.$set(this.addressInfo, 'provinceName', e.target.values[0]['name'])
        this.$set(this.addressInfo, 'provinceCode', e.target.values[0]['code'])
        this.$set(this.addressInfo, 'cityName', e.target.values[1]['name'])
        this.$set(this.addressInfo, 'cityCode', e.target.values[1]['code'])
        this.$set(this.addressInfo, 'districtName', e.target.values[2]['name'])
        this.$set(this.addressInfo, 'districtCode', e.target.values[2]['code'])
        this.$set(this.addressInfo, 'address', (this.addressInfo.provinceName || '') + (this.addressInfo.cityName || '') + (this.addressInfo.districtName || ''))
        this.$set(this.addressInfo, 'shortAddress', (this.addressInfo.provinceName || '') + (this.addressInfo.cityName || '') + (this.addressInfo.districtName || ''))
      },
      getAllAreaLevelList() {
        getAllAreaLevelList().then(response => {
          this.areaLevelList = response.data
          // tempAreaLevelList 省市区三级联动列表
          this.tempAreaLevelList[0] = response.data[0]
          this.tempAreaLevelList[1] = response.data[1].filter(item => item.parentId === response.data[0][0]['areaId'])
          this.tempAreaLevelList[2] = response.data[2].filter(item => item.parentId === response.data[1][0]['areaId'])
          this.multiIndex = [0, 0, 0]
          this.areaList.province_list = {}
          this.areaList.city_list = {}
          this.areaList.county_list = {}
          this.areaLevelList.forEach(item => {
            item.forEach(subitem => {
              switch (subitem.areaLevel) {
                case 1:
                  this.$set(this.areaList.province_list, subitem.areaCode, subitem.areaName)
                  break
                case 2:
                  this.$set(this.areaList.city_list, subitem.areaCode, subitem.areaName)
                  break
                case 3:
                  this.$set(this.areaList.county_list, subitem.areaCode, subitem.areaName)
                  break
              }
            })
          })
        })
      },
      copyRealInfo() {
        if (this.$pt.getStorageSync('certificateSelect')) {
          this.$pt.setStorageSync('copyBoolean', true)
          this.$pt.setStorageSync('copyRealInfo', this.addressInfo)
          this.$pt.navigateTo({ url: '/pages/personal/address/main' })
        } else {
          this.$pt.setStorageSync('copyBoolean', true)
          this.$pt.setStorageSync('copyRealInfo', this.addressInfo)
          this.$pt.navigateBack({ delta: -1 })
        }
      },
      // 选择证件类型
      showTypePicker() {
        this.isShowTypePicker = true
      },
      onTypeClose() {
        this.isShowTypePicker = false
      },
      onTypeConfirm(e) {
        this.isShowTypePicker = false
        this.pickTypeId = e.mp.detail.value.value
        this.pickTypeText = e.mp.detail.value.text
        this.addressInfo.certificateType = this.pickTypeId
      },
      sureChangeAddress(e) {
        this.resetAddressInfo()
        const {value} = e.mp.detail
        this.$set(this.addressInfo, 'provinceName', this.tempAreaLevelList[0][value[0]]['areaName'])
        this.$set(this.addressInfo, 'provinceCode', this.tempAreaLevelList[0][value[0]]['areaCode'])
        this.$set(this.addressInfo, 'cityName', this.tempAreaLevelList[1][value[1]]['areaName'])
        this.$set(this.addressInfo, 'cityCode', this.tempAreaLevelList[1][value[1]]['areaCode'])
        this.$set(this.addressInfo, 'districtName', this.tempAreaLevelList[2][value[2]]['areaName'])
        this.$set(this.addressInfo, 'districtCode', this.tempAreaLevelList[2][value[2]]['areaCode'])
        this.$set(this.addressInfo, 'address', (this.addressInfo.provinceName || '') + (this.addressInfo.cityName || '') + (this.addressInfo.districtName || ''))
        this.$set(this.addressInfo, 'shortAddress', (this.addressInfo.provinceName || '') + (this.addressInfo.cityName || '') + (this.addressInfo.districtName || ''))
      },
      bindRegionChange(e) {
        switch (e.mp.detail.column) {
          case 0:
            this.multiIndex[0] = e.mp.detail.value
            this.multiIndex[1] = 0
            this.multiIndex[2] = 0
            let temp = this.areaLevelList[1].filter(item => item.parentId === this.areaLevelList[0][e.mp.detail.value]['areaId'])
            this.$set(this.tempAreaLevelList, 1, temp)
            let temp2 = this.areaLevelList[2].filter(item => item.parentId === this.tempAreaLevelList[1][this.multiIndex[1]]['areaId'])
            this.$set(this.tempAreaLevelList, 2, temp2)
            break
          case 1:
            this.multiIndex[1] = e.mp.detail.value
            this.multiIndex[2] = 0
            let temp3 = this.areaLevelList[2].filter(item => item.parentId === this.tempAreaLevelList[1][this.multiIndex[1]]['areaId'])
            this.$set(this.tempAreaLevelList, 2, temp3)
            break
          case 2:
            this.multiIndex[2] = e.mp.detail.value
            break
        }
      },
      changeDefaultFlag() {
        this.defaultFlag = !this.defaultFlag
        this.addressInfo.defaultFlag = this.defaultFlag ? 1 : 0
      },
      changeCertificateInfoFlag() {
        this.isOpenCertificateInfo = !this.isOpenCertificateInfo
        this.addressInfo.isOpenCertificateInfo = this.isOpenCertificateInfo ? 1 : 0
      },
      changeAddressTag(index) {
        this.activeAddressTagIndex = index
      },
      changeInputCity() {
        if (this.addressInfo.address) return
        this.changeCity()
      },
      // 获取定位地址编码
      getAddressCode(address, list, parentId = '0') {
        if (list.length) {
          list.some(item => {
            if (address.indexOf(item.areaName) > -1 && item.parentId === parentId) {
              switch (item.areaLevel) {
                case 1:
                  this.$set(this.addressInfo, 'provinceCode', item.areaCode)
                  this.$set(this.addressInfo, 'provinceName', item.areaName)
                  this.getAddressCode(address, this.areaLevelList[1], item.areaId)
                  break
                case 2:
                  this.$set(this.addressInfo, 'cityCode', item.areaCode)
                  this.$set(this.addressInfo, 'cityName', item.areaName)
                  this.getAddressCode(address, this.areaLevelList[2], item.areaId)
                  break
                case 3:
                  this.$set(this.addressInfo, 'districtCode', item.areaCode)
                  this.$set(this.addressInfo, 'districtName', item.areaName)
                  break
              }
            }
            return address.indexOf(item.areaName) > -1 && item.parentId === parentId
          })
          this.$set(this.addressInfo, 'shortAddress', (this.addressInfo.provinceName || '') + (this.addressInfo.cityName || '') + (this.addressInfo.districtName || ''))
          if (!this.addressInfo.provinceName || !this.addressInfo.cityName || !this.addressInfo.districtName) {
            if (this.addressInfo.provinceName) {
              let provTemp = this.areaLevelList[0].filter((item, index) => {
                if (item.areaName === this.addressInfo.provinceName) {
                  this.multiIndex[0] = index
                }
                return item.areaName === this.addressInfo.provinceName
              })
              this.tempAreaLevelList[1] = this.areaLevelList[1].filter(item => item.parentId === provTemp[0].areaId)
              if (this.addressInfo.cityName) {
                let cityTemp = this.tempAreaLevelList[1].filter((item, index) => {
                  if (item.areaName === this.addressInfo.cityName) {
                    this.multiIndex[1] = index
                  }
                  return item.areaName === this.addressInfo.cityName
                })
                this.tempAreaLevelList[2] = this.areaLevelList[2].filter(item => item.parentId === cityTemp[0].areaId)
              }
            }
            this.showAddressPicker = true
          }
        }
      },
      changeCity() {
        const that = this
        that.$pt.setStorageSync('chooseLocation', true)
        that.viewBoolean = true
        that.$pt.chooseLocation({
          success: (res) => {
            console.log('changeCity切换城市', res)
            that.resetAddressInfo()
            that.$set(that.addressInfo, 'address', res.address)
            that.$set(that.addressInfo, 'communityName', res.name)
            this.getAddressCode(res.address + res.name, this.areaLevelList[0])
          },
          fail: function(err) {
            if (err.errMsg.indexOf('cancel') !== -1) return
            that.$pt.showModal({
              content: '需要访问你的位置',
              success(res) {
                if (res.confirm) {
                  that.$pt.openSetting()
                } else if (res.cancel) {
                  console.log(err)
                }
              }
            })
          }
        })
      },
      delAddress() {
        const that = this
        this.$pt.showModal({
          content: '确定要删除地址吗？',
          success(res) {
            if (res.confirm) {
              deleteAddress({
                addressId: that.addressInfo.addressId,
                memberId: that.getCustomerId
              }).then((response) => {
                if (response.isError) return
                that.$utils.showToast({ title: '删除成功！' })
                setTimeout(() => {
                  that.$pt.navigateBack({ delta: -1 })
                }, 1000)
              })
            } else if (res.cancel) {
              console.log('用户取消')
            }
          }
        })
      },
      saveAddress() {
        if (!this.getShowBuyCard) {
          // 微信审核时，不提交保存收货地址数据
          this.$pt.navigateBack({ delta: -1 })
          return
        }
        if (!this.addressInfo.receiverName) {
          this.$utils.showToast({ title: '收货人姓名不能为空' })
          return
        }
        if (this.addressInfo.receiverName && this.addressInfo.receiverName.length < 2) {
          this.$utils.showToast({ title: '收货人姓名字数过短！' })
          return
        }
        if (!this.addressInfo.receiverPhone) {
          this.$utils.showToast({ title: '收货人手机号码不能为空' })
          return
        }
        if (!(/^1\d{10}$/.test(this.addressInfo.receiverPhone))) {
          this.$utils.showToast({ title: '请填写正确的手机号！' })
          return
        }
        if (!this.addressInfo.shortAddress) {
          this.$utils.showToast({ title: '所在地区不能为空' })
          return
        }
        if (this.addressInfo.address && (!this.addressInfo.provinceName || !this.addressInfo.cityName || !this.addressInfo.districtName)) {
          // this.$utils.showToast({ title: '定位地址不完整,重新选择' })
          this.showAddressPicker = true
          return
        }
        if (!this.addressInfo.communityName) {
          this.$utils.showToast({ title: '详细地址不能为空' })
          return
        }
        if (this.isOpenCertificateInfo) {
          if (!this.addressInfo.certificateRealName) {
            this.$utils.showToast({ title: '真实姓名不能为空' })
            return
          }
          if (!this.addressInfo.certificateNumber) {
            this.$utils.showToast({ title: '证件号不能为空' })
            return
          }
          if (this.pickTypeId === 1 && !this.$utils.checkUserIdCode(this.addressInfo.certificateNumber)) {
            this.$utils.showToast({ title: '请输入正确的证件号' })
            return
          }
        }
        if (this.submitStatus) {
          // 防重复提交
          return
        }
        this.submitStatus = true
        this.addressInfo.memberId = this.getCustomerId
        if (this.houseNum) {
          this.addressInfo.houseNum = this.houseNum
        }
        this.addressInfo.addressLabel = this.addressTag[this.activeAddressTagIndex]
        this.addressInfo.certificateType = 1
        saveAddress(this.addressInfo).then((response) => {
          if (response.isError) return
          this.$utils.showToast({ title: '保存成功！' })
          if (this.$pt.getStorageSync('pageBuyFrom')) {
            // 清楚证件信息拷贝缓存设置
            this.$pt.removeStorageSync('copyBoolean')
            this.$pt.removeStorageSync('copyRealInfo')
            this.$pt.removeStorageSync('certificateSelect')
            this.$pt.setStorageSync('addressId', response.data.addressId)
            this.$pt.navigateBack({ delta: 2 })
            return
          }
          setTimeout(() => {
            if (Object.keys(this.$pt.getStorageSync('copyRealInfo')).length) {
              this.$pt.navigateBack({ delta: 3 })
            } else {
              this.$pt.navigateBack({ delta: -1 })
            }
            // 清楚证件信息拷贝缓存设置
            this.$pt.removeStorageSync('copyBoolean')
            this.$pt.removeStorageSync('copyRealInfo')
            this.$pt.removeStorageSync('certificateSelect')
          }, 500)
        }).catch(() => {
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .container {
    padding: 12px 10px;
    box-sizing: border-box;
    .bg-color {
      height: 246px;
      box-sizing: border-box;
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    }
  }
  .copy-c{
    color: #2975FF;
  }
  .icon-next-s{
    color: #6d6d6d;
  }
  .default-checkbox{
    /deep/ .van-switch{
      font-size: 23px!important;
    }
  }
  .space-bline{
    background: #f5f5f5;
  }
  .font-local{
    color: #ff0814;
  }
  .input-address-w{
    width: 160px;
  }
  .label-inline{
    display: inline-block;
  }
  .s-input-bar{
    border: #c5c5c5 1px solid;
    border-radius: 8px;
    font-size: 12px;
    padding: 0 0 0 8px;
    overflow: hidden;
    input{
      width: 70%!important;
    }
    .per-span{
      background: #fbf3d4;
      text-align: center;
      display: block;
      height: 30px;
      line-height: 30px!important;
      padding: 0 8px;
      margin-right: 0px;
    }
  }
  .tips-content{
    line-height: 1.8;
  }
  .save-p-button{
    border-radius: 100px;
    background: #ff243d;
    color: #fff;
    span{
      display: block;
    }
  }
  .panel-box{
    box-shadow: 0 0 0;
    margin-left: 2px;
    margin-right: 2px;
    border: none;
    position: relative;
    z-index: 2;
    h2{
      &:before{
        content: '';
        display: inline-block;
        vertical-align: top;
        width: 5px;
        height: 15px;
        background: #f8c400;
        margin: 3px 10px 0 6px;
      }
    }
  }
  .setting input {
    width: 100%;
  }
  .setting textarea {
    width: 100%;
    height: 100px;
  }
  .div-input {
    border-bottom: 0.5px solid #f6f6f6;
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: 15px;
    &.none-b{
      border-bottom: 0;
    }
    .address-tag-box>span:not(:first-child) {
      margin-left: 10px;
    }
    .address-tag {
      border-radius: 13px;
      display: inline-block;
      padding: 4px 12px;
    }
    .active-address-tag {
      background: #FFE9EB;
      color: #FF243D;
    }
    .dis-address-tag {
      color: #666;
      background: #F5F5F5;
    }
  }
  .div-input:last-child {
    border-bottom: 0;
  }
  .del-btn {
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 0.5px solid #e5e5e5;
    padding: 2px 10px;
  }
  .warmBox {
    width: 80%;
    position: fixed;
    left: 50%;
    top: 50%;
    border-radius: 10px;
    transform: translate(-50%, -50%);
    background: #fff;
    z-index: 1002;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
    .warm-btn-box {
      border-top: 1px solid #f5f5f5;
      display: flex;
      .sure-btn {
        color: #60739B;
      }
      .cancle-btn {
        border-right: 1px solid #f5f5f5;
      }
    }
  }
</style>
